import React from "react";
import MyNav from "./MyNav"
import Clock from "./Clock";
import Calc from "./Calc";
import ComponentLife from "./ComponetLift";
import SetStateDemo from "./SetStateDemo";
import IfDemo from "./IfDemo";
import KeyDemo from "./KeyDemo";
import FromDemo from "./FormDemo";
import RefsAndDOM from "./RefsAndDOM";
import RefsFrom from "./RefsForm";
import Parent from "./components/Parent"
import Compose from "./Compose";
import PropsTypeDemo from "./PropsTypeDemo";

class Home extends React.Component{
    constructor(){
        super()
        this.state={title:'文本1'}
    }

    render(){
        const nav1Data=["首页","学习","视频"]
        const nav2Data=["首页","学习","视频"]
        return (
          <div>
            <MyNav data={nav1Data}/>
            <MyNav data={nav2Data}/>
            <div>底部</div>
            <div>
              <Clock/>
            </div>
            <div>
              <Calc/>
            </div>
            <div>
                <ComponentLife title={this.state.title} changeFuTitle={this.changeFuTitle}/>
            </div>
            <div>
              <SetStateDemo/>
            </div>
            <div>
              <IfDemo/>
            </div>
            <div>
              <KeyDemo/>
            </div>
            <div>
              <FromDemo/>
            </div>
            <div>
              <RefsAndDOM/>
            </div>
            <div>
              <RefsFrom/>
            </div>
            <div>
              <Parent/>
            </div>
            <div>
                <Compose>
                    <div>我是组合效果</div>
                </Compose>
            </div>
            <div>
              <PropsTypeDemo name="标题"/>
            </div>
          </div>
        )
    }

    changeFuTitle=(val)=>{
        this.setState({
            title:val
        })
    }
}

export default Home